<template>
<div>
  <div>
    <h3 style="text-align: center">{{info.name}}</h3>
    <h3 class="title" v-if="parseInt(info.grade)<3">
      <Icon style="color: #235CA7" type="ios-albums-outline" />
      <span class="statistics_2">区数</span>：{{areaNum}}</h3>
    <!--              <h3 class="title" v-if="parseInt(TJinfo.grade)<4" v-if="parseInt(TJinfo.grade)===2>-->
    <!--                <Icon style="color: #235CA7" type="ios-grid-outline" />-->
    <!--                街&nbsp;&nbsp;&nbsp;道&nbsp;&nbsp;&nbsp;数 ：{{TJstatistics.streetNum}}</h3>-->
    <h3 class="title" v-if="parseInt(info.grade)===2">
      <Icon style="color: #235CA7" type="ios-grid-outline" />
      <span class="statistics_3">街道数</span>：112</h3>
    <h3 class="title" v-if="parseInt(info.grade)===3">
      <Icon style="color: #235CA7" type="ios-grid-outline" />
      <span class="statistics_3">街道数</span>：{{streetNum}}</h3>
    <h3 class="title" v-if="parseInt(info.grade)<=3">
      <Icon style="color: #235CA7" type="ios-grid-outline" />
      <span class="statistics_3">乡镇数</span>：{{xzNum}}</h3>
    <h3 class="title" v-if="parseInt(info.grade)<5">
      <Icon style="color: #235CA7" type="md-home" />
      <span class="statistics_3">社区数</span>：{{paintCommunityNum}} / {{communityNum}}</h3>
    <h3 class="title" v-if="parseInt(info.grade)<5">
      <Icon style="color: #235CA7" type="md-home" />
      <span class="statistics_2">村数</span>：{{paintCunNum}} / {{cunNum}}</h3>

    <h3 class="title" v-if="parseInt(info.grade)<6 && info.level !== '45'">
      <Icon style="color: #235CA7" type="md-grid" />
      <span class="statistics_3">网格数-社区</span>：{{communityGardenNum}}</h3>
    <h3 class="title" v-if="parseInt(info.grade)<6 && info.level !== '40'">
      <Icon style="color: #235CA7" type="md-grid" />
      <span class="statistics_3">网格数-村</span>：{{cunGardenNum}}</h3>

    <h3 class="title" v-if="parseInt(info.grade)<7">
      <Icon style="color: #235CA7" type="ios-paper" />
      <span class="statistics_2">楼数</span>：{{buildingNum}}</h3>

    <h3 class="title" v-if="parseInt(info.grade)<8 && info.level !== '45'">
      <Icon style="color: #235CA7" type="ios-home-outline" />
      <span class="statistics_3">房屋数-社区</span>：{{doorplateCommunityNum}}</h3>
    <h3 class="title" v-if="parseInt(info.grade)<8 && info.level !== '40'">
      <Icon style="color: #235CA7" type="ios-home-outline" />
      <span class="statistics_3">房屋数-村</span>：{{doorplateCunNum}}</h3>

    <h3 class="title" v-if="parseInt(info.grade)<8 && info.level !== '45'">
      <Icon style="color: #235CA7" type="md-man" />
      <span class="statistics_4">入户人数-社区</span>：{{userCommunityNum}}</h3>
    <h3 class="title" v-if="parseInt(info.grade)<8 && info.level !== '40'">
      <Icon style="color: #235CA7" type="md-man" />
      <span class="statistics_4">入户人数-村</span>：{{userCunNum}}</h3>
  </div>
</div>
</template>

<script>
import {
  getBuildingNum,
  getDoorplateNumCommunity, getDoorplateNumCun,
  getGardenNum,
  getOfficeStatistics, getUserNumCommunity, getUserNumCun
} from '../../../../api/grid-statistics'

export default {
  name: 'grid-card-statistics',
  props: {
    pickID: {
      type: String
    },
    pickGrade: {
      type: String
    }
  },
  data () {
    return {
      severUserInfo: {},
      info: {},
      areaNum: 0,
      streetNum: 0,
      communityNum: 0,
      cunNum: 0,
      xzNum: 0,
      paintCommunityNum: 0,
      paintCunNum: 0,
      communityGardenNum: 0,
      cunGardenNum: 0,
      buildingNum: 0,
      doorplateCommunityNum: 0,
      doorplateCunNum: 0,
      userCommunityNum: 0,
      userCunNum: 0
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
  },
  methods: {
    init (e1, e2) {
      console.log('init', this.severUserInfo)
      this.getOfficeStatistics(e1, e2)
      this.getGardenNum(e1, e2)
      this.getBuildingNum(e1, e2)
      if (this.info.level !== '45') {
        this.getDoorplateNumCommunity(e1, e2)
        this.getUserNumCommunity(e1, e2)
      }
      if (this.info.level !== '40') {
        let _this = this
        setTimeout(function () {
          if (_this.cunGardenNum === 0) {
            console.log(111)
            _this.doorplateCunNum = 0
            _this.userCunNum = 0
          } else {
            console.log(222)
            _this.getDoorplateNumCun(e1, e2)
            _this.getUserNumCun(e1, e2)
          }
        }, 2000)
      }
    },
    getUserNumCommunity (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getUserNumCommunity(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.userCommunityNum = ret.data.data.num
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    getUserNumCun (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getUserNumCun(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.userCunNum = ret.data.data.num
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    getDoorplateNumCun (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getDoorplateNumCun(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.doorplateCunNum = ret.data.data.num
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    getDoorplateNumCommunity (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getDoorplateNumCommunity(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.doorplateCommunityNum = ret.data.data.num
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    getBuildingNum (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getBuildingNum(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.buildingNum = ret.data.data.buildingNum
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    getGardenNum (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getGardenNum(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.communityGardenNum = ret.data.data.communityGardenNum
          this.cunGardenNum = ret.data.data.cunGardenNum
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    getOfficeStatistics (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getOfficeStatistics(data).then(ret => {
        if (ret.data.errcode === 0) {
          let result = ret.data.data
          this.info = result.info
          this.areaNum = result.areaNum
          this.streetNum = result.streetNum
          this.communityNum = result.communityNum
          this.cunNum = result.cunNum
          this.xzNum = result.xzNum
          this.paintCommunityNum = result.paintCommunityNum
          this.paintCunNum = result.paintCunNum
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    }

  },
  watch: {
    pickID: function (val) {
      console.log('grid-card-statistics-pickID', val)
      this.init(this.pickGrade, this.pickID)
    }
  }
}
</script>

<style scoped>
.statistics_2{
  letter-spacing: 20px;
  margin-left: 10px;
  font-size: 16px
}
.statistics_3{
  letter-spacing: 8px;
  margin-left: 10px;
  font-size: 16px
}
.statistics_4{
  letter-spacing: 2px;
  margin-left: 10px;
  font-size: 16px
}

</style>
